/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
	<div class="item-title">
	  <div class="subject">
	    <h3>任务管理</h3>
	  </div>
	</div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>通过任务管理，你可以进行查看、编辑等操作</li>
          <li>你可以根据条件搜索任务，然后选择相应的操作</li>
		  <li>点击执行，手动触发一次任务执行</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <div class="mDiv">
      <div class="ftitle">
        <h3>调度列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <div class="fbutton">
        <div class="add" @click="add">
          <span>
            <i class="el-icon-plus" /> 添加任务
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
      <div class="searchbox">
        <el-input
          class="searchinput"
          v-model="app"
          width="10"
          size="small"
          placeholder="服务名"
          clearable
        />
        <el-input
          class="searchinput"
          v-model="handler"
          width="10"
          size="small"
          placeholder="处理器"
          clearable
        />
        <el-button
          class="searchbtn"
          size="small"
          icon="el-icon-search"
          @click="currentPage = 1;getPage()"
        >搜索</el-button>
      </div>
    </div>
    <div class="tablebox">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%;">
        <el-table-column label="任务ID" prop="id" width="80"></el-table-column>
        <el-table-column label="app" prop="app" width="105" show-overflow-tooltip></el-table-column>
        <el-table-column label="作者" prop="author" width="80"></el-table-column>
        <el-table-column label="cron" prop="cron" width="115"></el-table-column>
        <el-table-column label="参数" prop="param" width="80"></el-table-column>
        <el-table-column label="备注" prop="remark" width="105" show-overflow-tooltip></el-table-column>
        <el-table-column label="失败次数" prop="fail_retry_count" width="80"></el-table-column>
        <el-table-column label="处理器" prop="handler" width="130"></el-table-column>
        <el-table-column label="最后一次执行时间" width="140">
			<template slot-scope="scope">
				<span v-if="scope.row.last_time">{{(scope.row.last_time / 1000) | datefmtAll}}</span>
			</template>
		</el-table-column>
        <el-table-column label="下次执行时间" width="140">
			<template slot-scope="scope">
				<span v-if="scope.row.next_time">{{(scope.row.next_time / 1000) | datefmtAll}}</span>
			</template>
		</el-table-column>
		<el-table-column label="更新时间" width="140">
			<template slot-scope="scope">
				<span v-if="scope.row.update_time">{{(scope.row.update_time / 1000) | datefmtAll}}</span>
			</template>
		</el-table-column>
		<el-table-column label="执行状态" prop="status" width="80">
			<template slot-scope="scope">
				<el-tag size="success" effect="dark" v-if="scope.row.status == 0">运行</el-tag>
				<el-tag size="danger" effect="dark" v-if="scope.row.status == 1">停止</el-tag>
			</template>
		</el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="small" @click="execute(scope.row.id)" icon="el-icon-finished">执行</el-button>
              <el-button v-if="scope.row.status == 1" size="small" @click="start(scope.row.id)" icon="el-icon-video-play">启动</el-button>
			  <el-button v-if="scope.row.status == 0" size="small" @click="stop(scope.row.id)" icon="el-icon-video-pause">停止</el-button>
              <el-button size="small" @click="jobLog(scope.row.id)" icon="el-icon-notebook-2">日志</el-button>
			  <el-button size="small" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button>
			  <el-button size="small" @click="del(scope.row.id)" icon="el-icon-delete">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="paginationbox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
	<el-dialog title="添加/编辑" :visible.sync="dialogFormVisible" width="35%" :modal-append-to-body="false">
	  <el-form :model="form" label-width="120px" class="dialog-form">
		<el-form-item label="执行器" required>
		  <el-input v-model="form.app" size="mini"></el-input>
		</el-form-item>
	    <el-form-item label="备注">
	      <el-input v-model="form.remark" size="mini"></el-input>
	    </el-form-item>
		<el-form-item label="JobHandler" required>
		  <el-input v-model="form.handler" size="mini"></el-input>
		</el-form-item>
		<el-form-item label="Cron" required>
		  <el-input v-model="form.cron" size="mini"></el-input>
		</el-form-item>
		<el-form-item label="任务超时时间" required>
		  <el-input v-model="form.timeout" size="mini"></el-input>
		</el-form-item>
		<el-form-item label="失败重试次数" required>
		  <el-input v-model="form.fail_retry_count" size="mini"></el-input>
		</el-form-item>
		<el-form-item label="作者">
		  <el-input v-model="form.author" size="mini"></el-input>
		</el-form-item>
		<el-form-item label="任务参数">
		    <el-input type="textarea" style="width: 220px;" v-model="form.param"></el-input>
		</el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="onSubmit" :loading="isLoading">保 存</el-button>
	  </div>
	</el-dialog>
	<el-dialog title="执行" :visible.sync="executeDialog" width="35%" :modal-append-to-body="false">
	  <el-form class="dialog-form">
		  <el-form-item label="任务参数">
		      <el-input type="textarea" v-model="param"></el-input>
		  </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="executeDialog = false">取 消</el-button>
	    <el-button type="primary" @click="jobInfoExecute" :loading="isLoading">执 行</el-button>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
import { 
	getJobInfoPage, 
	addJobInfo, 
	updateJobInfo, 
	getJobInfo,
	jobInfoExecute,
	jobInfoStart,
	jobInfoStop,
	deleteJobInfo
} from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      currentPage: this.$route.params.currentPage || 1,
      totalCount: 0,
      pageSize: 10,
	  app: '',
	  handler: '',
	  dialogFormVisible: false,
	  executeDialog: false,
	  form: {},
      isLoading: false,
	  param: null,
	  id: null
    };
  },
  created() {
    this.getPage();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage() {
      var that = this;
	  getJobInfoPage({
		  app: this.app,
		  handler: this.handler,
		  page: this.currentPage,
		  size: this.pageSize
	  }).then(function(res) {
        that.tableData = res.records;
        that.totalCount = res.total;
      });
    },
    refresh() {
      this.getPage();
      this.$message.success("刷新成功！");
    },
    address(scope) {
      this.$router.push({
        name: "member_address",
        params: {
          id: scope.row.user_id
        }
      });
    },
	edit(id) {
		var that = this;
		getJobInfo(id).then(function(res) {
			that.form = res;
			that.dialogFormVisible = true;
		})
	},
	add() {
		this.form = {};
		this.dialogFormVisible = true;
	},
	onSubmit() {
		var that = this;
		this.isLoading = true;
		if (this.form.id) {
			//编辑
			updateJobInfo(that.form).then(function(res) {
				if (res.status == 1) {
					that.$message.success({
					  message: "编辑成功!",
					  onClose: function() {
					    that.dialogFormVisible = false;
						that.isLoading = false;
					    that.getPage();
					  }
					});
				} else {
					that.$message.error(res.msg);
				}
			})
		} else {
			//新增
			addJobInfo(that.form).then(function(res) {
				if (res.status == 1) {
					that.$message.success({
					  message: "添加成功!",
					  onClose: function() {
					    that.dialogFormVisible = false;
						that.isLoading = false;
					    that.getPage();
					  }
					});
				} else {
					that.$message.error(res.msg);
				}
			})
		}
	},
	execute(id) {
		this.executeDialog = true;
		this.id = id;
	},
	jobInfoExecute() {
		var that = this;
		this.isLoading = true;
		jobInfoExecute(this.id, this.param).then(function(res) {
			if (res.status == 1) {
				that.isLoading = false;
				that.$message.success("执行成功");
			} else {
				that.$message.error(res.msg);
			}
		});
	},
	start(id) {
		var that = this;
		this.$confirm("确定启动?", "提示", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning"
		}).then(() => {
			jobInfoStart(id).then(function(res) {
				if (res.status == 1) {
					that.$message.success("启动成功!");
					that.getPage();
				} else {
					that.$message.error(res.msg);
				}
			})
		}).catch(() => {
          that.$message.info("已取消");
        });
	},
	stop(id) {
		var that = this;
		this.$confirm("确定停止?", "提示", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning"
		}).then(() => {
			jobInfoStop(id).then(function(res) {
				if (res.status == 1) {
					that.$message.success("停止成功!");
					that.getPage();
				} else {
					that.$message.error(res.msg);
				}
			})
		}).catch(() => {
		  that.$message.info("已取消");
		});
	},
	del(id) {
		var that = this;
		this.$confirm("确定删除?", "提示", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning"
		}).then(() => {
			deleteJobInfo(id).then(function(res) {
				if (res.status == 1) {
					that.$message.success("删除成功!");
					that.getPage();
				} else {
					that.$message.error(res.msg);
				}
			})
		}).catch(() => {
		  that.$message.info("已取消");
		});
	},
    jobLog(id) {
      this.$router.push({
        name: "job_log",
        params: {
          id: id
        }
      });
    }
  }
};
</script>

<style scoped>
.searchinput {
  width: auto;
}
>>>.el-textarea__inner {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    height: 120px;
}
</style>
